<template>
  <el-dialog
    :title="id ? '编辑' : '新增'"
    :visible.sync="addTimedPlanShow"
    :destroy-on-close="true"
    :append-to-body="true"
    width="80%"
    @close="handleClose"
    class="edit-main"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="重复周期" prop="questionText">
        <el-select
          v-model="questionText"
          style="width: 80%"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in repeatList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="呼叫时段" prop="questionText">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>

        <el-time-picker
          v-if="inputVisible"
          is-range
          v-model="timeRange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          size="small"
          style="width: 80%"
          value-format="HH:mm"
          @change="handleTimeConfirm"
        ></el-time-picker>

        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >+ 选择时间范围</el-button
        >
      </el-form-item>
      <el-form-item label="备注" prop="questionText">
        <el-input
          type="textarea"
          style="width: 80%"
          placeholder="请输入内容"
          v-model="formData.questionText"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateMsg } from "@/api/customerService/session";

export default {
  name: "addTaskDialog",
  props: {
    addTimedPlanDialogShow: {
      type: Boolean,
      default: false,
    },
    questionText: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      tableData: [], //表格数据
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
      formData: {
        questionText: "",
      },
      voiceTypeList: [],
      rules: {
        questionText: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
      repeatList: [
        { value: "1", label: "周一" },
        { value: "2", label: "周二" },
        { value: "3", label: "周三" },
        { value: "4", label: "周四" },
        { value: "5", label: "周五" },
        { value: "6", label: "周六" },
        { value: "7", label: "周天" },
      ],
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      total: 0,
      addTimedPlanShow: false,
      dynamicTags: ["09:00 至 12:00", "14:00 至 18:00"], // 初始时间标签
      inputVisible: false,
      timeRange: null, // 存储选择的时间范围数组 [start, end]
    };
  },

  watch: {
    addTimedPlanDialogShow: {
      handler(val) {
        if (val) {
          this.addTimedPlanShow = val;
        }
      },
      immediate: true,
    },
    questionText: {
      handler(val) {
        if (val) {
          this.formData.questionText = val;
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.timeRange = null; // 显示时重置选择
    },

    handleTimeConfirm() {
      if (this.timeRange && this.timeRange.length === 2) {
        // 将时间数组转换为"HH:mm 至 HH:mm"格式
        const timeText = `${this.timeRange[0]} 至 ${this.timeRange[1]}`;
        this.dynamicTags.push(timeText);
      }
      this.inputVisible = false;
    },
    // 保存
    onSubmit() {
      this.$refs["formData"].validate(async (valid) => {
        if (valid) {
          const params = {
            id: this.id,
            questionText: this.formData.questionText,
          };
          const { code } = await updateMsg(params);
          if (code === 200) {
            this.handleClose();
          }
        }
      });
    },

    handleClose() {
      this.addTimedPlanShow = false;
      this.formData.questionText = "";
      this.pagination = {
        pageNum: 1,
        pageSize: 10,
      };
      this.total = 0;
      this.tableData = [];
      this.$emit("onCloseEditDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-main {
  ::v-deep .el-textarea__inner {
    height: 150px;
  }
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.el-time-picker {
  margin-left: 10px;
  vertical-align: bottom;
  width: 260px; /* 时间选择器宽度调整 */
}
</style>
